import React from "react"
import { Outlet } from "react-router-dom"
import { Layout, theme } from "antd"

import MyMenu from "./Header/Menu"
import Logo from "./Header/Logo"
import SearchBar from "./Header/SearchBar"
import Avatar from "./Header/Avatar"
import AppBreadcrumb from "./Breadcrumb"

import styles from "./Layout.module.scss"

const { Header, Content, Footer } = Layout

const App: React.FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken()

  return (
    <Layout className={styles.layout}>
      <Header
        className={styles.header}
        style={{
          background: colorBgContainer,
        }}
      >
        <Logo />
        <MyMenu />
        <SearchBar />
        <Avatar />
      </Header>
      <Content className={styles.mainContent}>
        <AppBreadcrumb />
        <Layout
          className={styles.innerLayout}
          style={{
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Content className={styles.innerContent}>
            <Outlet />
          </Content>
        </Layout>
      </Content>
      <Footer className={styles.footer}>yeahz ©{new Date().getFullYear()}</Footer>
    </Layout>
  )
}

export default App
